Frontend Presentation API:n näytönhallinta: Usean näytön määritys globaaleille sovelluksille

Nykypäivän verkottuneessa maailmassa verkkosovellukset eivät enää rajoitu yhteen selainikkunaan. Frontend Presentation API antaa kehittäjille tehokkaan mahdollisuuden laajentaa sovelluksiaan useille näytöille, mikä avaa runsaasti mahdollisuuksia parannettuihin käyttäjäkokemuksiin. Tämä opas tutkii Presentation API:n yksityiskohtia keskittyen erityisesti usean näytön määritykseen ja tarjoten käytännön esimerkkejä, jotka ovat relevantteja globaalille yleisölle.

Presentation API:n ymmärtäminen

Presentation API on web-standardi, joka mahdollistaa verkkosovellusten käyttävän toissijaista näyttöä tai esitysruutua näyttääkseen sisältöä, joka poikkeaa päänäytöstä. Tämä on erityisen hyödyllistä esimerkiksi seuraavissa tilanteissa:

• Neuvotteluhuoneet: Esitysten jakaminen kannettavalta tietokoneelta projektoriin.
• Myymäläkioskit: Tuotetietojen näyttäminen suurella näytöllä, kun käyttäjä on vuorovaikutuksessa pienemmän kosketusnäytön kanssa.
• Digitaaliset opasteet: Dynaamisen sisällön lähettäminen useille näytöille julkisissa tiloissa.
• Pelaaminen: Pelikokemuksen laajentaminen toiselle näytölle syvemmän immersion saavuttamiseksi tai lisätietojen tarjoamiseksi.
• Oppimisympäristöt: Oppimateriaalien näyttäminen suurella näytöllä, kun opiskelijat työskentelevät omilla laitteillaan.

API rakentuu seuraavien avainkäsitteiden ympärille:

• PresentationRequest: Olio, jota käytetään esitysistunnon aloittamiseen.
• PresentationConnection: Olio, joka edustaa yhteyttä ohjaavan sivun ja esittävän sivun välillä.
• PresentationReceiver: Olio esittävällä sivulla, joka vastaanottaa viestejä ohjaavalta sivulta.

Usean näytön määrityksen asettaminen

Ensimmäinen vaihe Presentation API:n hyödyntämisessä on saatavilla olevien näyttöjen tunnistaminen ja esitysistunnon aloittaminen. Tässä on erittely prosessista:

1. Saatavilla olevien näyttöjen tunnistaminen

navigator.presentation.getAvailability()-metodi palauttaa promisen, joka ratkeaa PresentationAvailability-oliolla. Tämä olio ilmaisee, onko esitysnäyttö tällä hetkellä saatavilla.

            
navigator.presentation.getAvailability()
  .then(function(availability) {
    if (availability.value) {
      console.log('Esitysnäyttö on saatavilla.');
    } else {
      console.log('Esitysnäyttö ei ole saatavilla.');
    }

    availability.onchange = function() {
      if (availability.value) {
        console.log('Esitysnäyttö tuli saataville.');
      } else {
        console.log('Esitysnäyttö ei ole enää saatavilla.');
      }
    };
  });

            

              
                Copy
              
            
          

Tämä koodinpätkä tarkistaa, onko esitysnäyttö saatavilla, ja kuuntelee muutoksia sen saatavuudessa. On tärkeää käsitellä onchange-tapahtuma, jotta voidaan reagoida dynaamisesti esitysnäyttöjen saatavuuden muutoksiin.

2. Esitysistunnon aloittaminen

Aloittaaksesi esityksen, luo PresentationRequest-olio ja anna sille esityssivun URL-osoite.

            
let presentationRequest = new PresentationRequest(['presentation.html']);

presentationRequest.start()
  .then(function(connection) {
    console.log('Esitys aloitettu onnistuneesti.');
    // Käsittele esitysyhteys
    connection.onmessage = function(event) {
      console.log('Vastaanotettu viesti:', event.data);
    };
    connection.onclose = function() {
      console.log('Esitys suljettu.');
    };
    connection.onerror = function(event) {
      console.error('Esityksen virhe:', event.error);
    };
  })
  .catch(function(error) {
    console.error('Esityksen aloittaminen epäonnistui:', error);
  });

            

              
                Copy
              
            
          

Tämä koodi alustaa esitysistunnon käyttäen presentation.html-tiedostoa toissijaisella näytöllä näytettävänä sisältönä. Se luo sitten yhteyden ja asettaa tapahtumakuuntelijat viesteille, sulkemiselle ja virheille.

3. Esityssivu (PresentationReceiver)

Esityssivu on valmisteltava vastaanottamaan viestejä ohjaavalta sivulta. Tämä saavutetaan käyttämällä PresentationReceiver-oliota.

            
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    console.log('Yhteys vastaanotettu:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });

  connectionList.onconnectionavailable = function(event) {
    let connection = event.connection;
    console.log('Uusi yhteys saatavilla:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  };
});

            

              
                Copy
              
            
          

Tämä koodinpätkä kuuntelee saapuvia yhteyksiä esityksen vastaanottosivulla ja käsittelee ohjaavalta sivulta vastaanotettuja viestejä, päivittäen esitysnäytön sisällön vastaavasti.

Edistynyt usean näytön määritys

Perusesitystoimintojen lisäksi Presentation API mahdollistaa monimutkaisempia usean näytön määrityksiä. Tässä muutamia edistyneitä tekniikoita:

1. Tietyn näytön valitseminen

Presentation API ei tarjoa suoraa tapaa luetella saatavilla olevia näyttöjä ja valita niistä tiettyä. Voit kuitenkin käyttää PresentationRequest-konstruktoria URL-osoitteiden taulukon kanssa. Selainagentti esittää tällöin käyttäjälle valitsimen, jonka avulla hän voi valita käytettävän näytön.

2. Dynaamiset sisältöpäivitykset

PresentationConnection.postMessage()-metodi mahdollistaa reaaliaikaisen viestinnän ohjaavan sivun ja esityssivun välillä. Tämä mahdollistaa esityksen sisällön dynaamisen päivittämisen käyttäjän vuorovaikutuksen tai datamuutosten perusteella.

            
// Viestin lähettäminen ohjaavalta sivulta
connection.postMessage('Hei, esitysnäyttö!');

// Viestin vastaanottaminen esityssivulla
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });
});

            

              
                Copy
              
            
          

Tämä esimerkki näyttää yksinkertaisen tekstiviestin lähettämisen ohjaavalta sivulta esityssivulle, joka sitten päivittää sisältönsä.

3. Eri näyttötarkkuuksien ja kuvasuhteiden käsittely

Kun sisältöä esitetään useilla näytöillä, on tärkeää ottaa huomioon näyttöjen erilaiset resoluutiot ja kuvasuhteet. Käytä CSS-mediakyselyitä ja joustavia asetteluja varmistaaksesi, että sisältösi mukautuu sulavasti eri näyttökokoihin. Harkitse näkymäportin yksiköiden (vw, vh, vmin, vmax) käyttöä elementtien skaalaamiseksi suhteessa näytön kokoon.

            
/* Esimerkki-CSS eri näyttökokojen käsittelyyn */
@media (min-aspect-ratio: 16/9) {
  .content {
    width: 80vw;
    height: 90vh;
  }
}

@media (max-aspect-ratio: 4/3) {
  .content {
    width: 90vw;
    height: 75vh;
  }
}

            

              
                Copy
              
            
          

Tämä CSS-esimerkki käyttää mediakyselyitä säätääkseen sisältöelementin mittoja näytön kuvasuhteen perusteella.

4. Kansainvälistäminen ja lokalisointi

Globaaleissa sovelluksissa on olennaista ottaa huomioon kansainvälistäminen (i18n) ja lokalisointi (l10n). Käytä asianmukaisia kielitageja HTML-koodissasi, tarjoa käännökset kaikelle tekstisisällölle ja muotoile päivämäärät, numerot ja valuutat käyttäjän aluekohtaisten asetusten mukaan. JavaScriptin Internationalization API (Intl) voi olla tässä erittäin hyödyllinen.

            
// Numeron muotoilu tietyn aluekohtaisen asetuksen mukaan
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Tulos: 1.234.567,89

// Päivämäärän muotoilu tietyn aluekohtaisen asetuksen mukaan
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Tulos: 2023/10/27

            

              
                Copy
              
            
          

Nämä esimerkit näyttävät, kuinka numeroita ja päivämääriä muotoillaan eri aluekohtaisten asetusten mukaan Intl API:n avulla.

5. Saavutettavuusnäkökohdat

Varmista, että moninäyttösovelluksesi ovat saavutettavia vammaisille käyttäjille. Tarjoa vaihtoehtoiset tekstit kuville, käytä semanttista HTML:ää ja varmista, että sovelluksesi on navigoitavissa näppäimistöllä. Harkitse ARIA-attribuuttien käyttöä dynaamisen sisällön saavutettavuuden parantamiseksi.

Käytännön esimerkkejä globaaleille sovelluksille

Tässä on muutama käytännön esimerkki siitä, miten Presentation API:a voidaan käyttää globaaleissa sovelluksissa:

• Kansainväliset konferenssiesitykset: Verkkosovellus, jonka avulla esittäjät voivat jakaa dioja projektorilla samalla kun he katselevat esiintyjän muistiinpanoja ja hallitsevat esitystä kannettavalla tietokoneellaan. Sovelluksen tulisi tukea useita kieliä ja antaa esittäjien mukauttaa esityksen asettelua eri näyttökokoja varten.
• Globaalit myymäläkioskit: Kioskisovellus, joka näyttää tuotetietoja suurella näytöllä samalla kun käyttäjät voivat selata tuotteita ja tehdä ostoksia kosketusnäytöllä. Sovelluksen tulisi tukea useita valuuttoja, kieliä ja maksutapoja.
• Monikieliset digitaaliset opasteet: Digitaalinen opastejärjestelmä, joka näyttää dynaamista sisältöä, kuten uutisotsikoita, säätietoja ja mainoksia, useilla näytöillä julkisissa tiloissa. Sisällön tulisi kääntyä automaattisesti kunkin näytön paikalliselle kielelle.
• Yhteiskäyttöinen valkotaulu etätiimeille: Verkkopohjainen valkotaulusovellus, joka mahdollistaa maantieteellisesti hajautettujen tiimien yhteistyön reaaliajassa. Toissijainen näyttö voisi näyttää zoomatun näkymän tietystä alueesta tai esittää lisämateriaalia.

Koodiesimerkki: Yksinkertainen esitys dynaamisilla päivityksillä

Tässä on täydellinen koodiesimerkki, joka esittelee yksinkertaisen esityksen dynaamisilla päivityksillä:

Ohjaava sivu (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentation API -esimerkki</title>
</head>
<body>
  <h1>Ohjaava sivu</h1>
  <button id="startButton">Aloita esitys</button>
  <input type="text" id="messageInput" placeholder="Syötä viesti">
  <button id="sendMessageButton">Lähetä viesti</button>

  <script>
    let connection;
    let presentationRequest = new PresentationRequest(['presentation.html']);

    document.getElementById('startButton').addEventListener('click', function() {
      presentationRequest.start()
        .then(function(conn) {
          connection = conn;
          console.log('Esitys aloitettu onnistuneesti.');
          connection.onmessage = function(event) {
            console.log('Vastaanotettu viesti:', event.data);
          };
          connection.onclose = function() {
            console.log('Esitys suljettu.');
          };
          connection.onerror = function(event) {
            console.error('Esityksen virhe:', event.error);
          };
        })
        .catch(function(error) {
          console.error('Esityksen aloittaminen epäonnistui:', error);
        });
    });

    document.getElementById('sendMessageButton').addEventListener('click', function() {
      if (connection) {
        let message = document.getElementById('messageInput').value;
        connection.postMessage(message);
      } else {
        alert('Esitystä ei ole aloitettu.');
      }
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Esityssivu (presentation.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Esitysnäyttö</title>
  <style>
    body {
      font-size: 2em;
      text-align: center;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h1>Esitysnäyttö</h1>
  <div id="content"></div>

  <script>
    navigator.presentation.receiver.connectionList.then(function(connectionList) {
      connectionList.connections.forEach(function(connection) {
        console.log('Yhteys vastaanotettu:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      });

      connectionList.onconnectionavailable = function(event) {
        let connection = event.connection;
        console.log('Uusi yhteys saatavilla:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      };
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Tämä esimerkki luo yksinkertaisen ohjaavan sivun, jossa on painike esityksen aloittamiseen sekä tekstikenttä ja painike viestien lähettämiseen esitysnäytölle. Esitysnäyttö vastaanottaa viestit ja päivittää sisältönsä vastaavasti.

Yleisten ongelmien vianmääritys

• Esitysnäyttöä ei tunnisteta: Varmista, että toissijainen näyttö on kytketty ja otettu käyttöön käyttöjärjestelmän asetuksissa. Tarkista selaimen yhteensopivuus ja päivitä se uusimpaan versioon.
• Esitys ei käynnisty: Varmista, että esityksen URL-osoite on oikea ja käytettävissä. Tarkista mahdolliset virheet JavaScript-konsolista.
• Viestejä ei vastaanoteta: Varmista, että PresentationConnection on muodostettu oikein ja että onmessage-tapahtumakuuntelija on määritetty oikein sekä ohjaavalla että esityssivulla.
• Ristiinalkuperäongelmat (Cross-Origin): Jos ohjaava sivu ja esityssivu sijaitsevat eri verkkotunnuksissa, varmista, että CORS (Cross-Origin Resource Sharing) on määritetty oikein sallimaan viestintä alkuperien välillä.

Presentation API:n tulevaisuus

Presentation API on jatkuvasti kehittyvä teknologia. Tulevaisuuden parannuksia voivat olla:

• Parannettu näyttöjen luettelointi ja valinta.
• Hienostuneempi esityksen asettelun ja tyylien hallinta.
• Parannetut turvallisuusominaisuudet.
• Integraatio muiden web-rajapintojen, kuten WebXR:n, kanssa lisätyn ja virtuaalitodellisuuden kokemuksia varten.

Yhteenveto

Frontend Presentation API tarjoaa tehokkaan mekanismin verkkosovellusten laajentamiseen useille näytöille, mikä mahdollistaa laajan valikoiman innovatiivisia käyttäjäkokemuksia. Ymmärtämällä API:n ydinajatukset ja noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä kehittäjät voivat luoda mukaansatempaavia ja tehokkaita moninäyttösovelluksia globaalille yleisölle. Kansainvälisistä konferenssiesityksistä monikielisiin digitaalisiin opasteisiin, mahdollisuudet ovat rajattomat. Hyödynnä Presentation API:n voima ja avaa moninäyttöisten verkkosovellusten potentiaali.